<h1 class="page_title">
    Bootstrap 多媒体对象（Media Object） </h1>
<p>
    我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 </p>
<p>
    媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象： </p>
<ul class="list">
    <li>
        <b>
            .media </b>
        ：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
    </li>
    <li>
        <b>
            .media-list </b>
        ：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
    </li>
</ul>
<div class="codeView bs-docs-example ">
    <ul class="media-list">
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="/static/img/pic.png"
                     alt="通用的占位符图像">
            </a>

            <div class="media-body">
                <h4 class="media-heading">媒体标题</h4>

                <p> 这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                </p>

                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="/static/img/pic.png"
                             alt="通用的占位符图像">
                    </a>

                    <div class="media-body">
                        <h4 class="media-heading">嵌套的媒体标题</h4>

                        <p> 这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                        </p>

                        <div class="media">
                            <a class="pull-left" href="#">
                                <img class="media-object" src="/static/img/pic.png"
                                     alt="通用的占位符图像">
                            </a>

                            <div class="media-body">
                                <h4 class="media-heading">嵌套的媒体标题</h4>

                                <p> 这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="/static/img/pic.png"
                             alt="通用的占位符图像">
                    </a>

                    <div class="media-body">
                        <h4 class="media-heading">嵌套的媒体标题</h4>

                        <p> 这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="/static/img/pic.png"
                     alt="通用的占位符图像">
            </a>

            <div class="media-body">
                <h4 class="media-heading">媒体标题</h4>

                <p> 这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                </p>
            </div>
        </li>
    </ul>
</div>
<h3>
    组件包 </h3>
<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.media包即可</span></pre>
